<template>
	<view>
		 <view class="video">
		 	 <view class="video-list" v-for="(item,index) in videoList" :key='index' @click="tapPlay(item)">
		 		  <image class="video-list-stop" src="/static/play.png"></image>
		 		  <image class="video-list-img" :src="item.coverUrl"></image>
		 	 </view>
		  </view>
		 
		 <video id='myVideo' :class="[fullScreen ? 'show' :'hide']"  :src="mpUrl" autoplay="true"
		 @fullscreenchange="tapfullScreen"  @ended="closeVideo"  controls></video>
	</view>
</template>

<script>
	 export default{
		 props:{
			 videoList:{
				 type:Array,
				 default:()=>{
					return []
				 },
				 
			 }
		 },
		 data(){
			 return{
				 mpUrl:'',
				 fullScreen:false,
				 videoContext:null,
			 }
		 },
		 onReady: function(res) {
			 // #ifndef MP-ALIPAY
			 this.videoContext = uni.createVideoContext('myVideo')
			 // #endif
		 },
		 watch:{
			 'videoList':function(newVal, oldVal) {
            // TO DO
				console.log("newVal:", newVal);
				console.log("oldVal:", oldVal);
			}

		 },
		 methods:{
			 tapPlay(e){
				 console.log(e)
			 	this.mpUrl = e.fileUrl
				this.videoContext = uni.createVideoContext('myVideo')
			 	this.fullScreen = true
			 	// this.markShow =true
			 	this.videoContext.requestFullScreen();	
			 },
			 /**关闭视屏 */
			 closeVideo() {
			   //执行退出全屏方法
			   this.videoContext = uni.createVideoContext('myVideo')
			   this.videoContext.exitFullScreen();     
			 },
			 /**视屏进入、退出全屏 */
			 tapfullScreen(e){
			 	console.log(e)
			   var isFull = e.detail.fullScreen;
			   //视屏全屏时显示加载video，非全屏时，不显示加载video
			  
			     this.fullScreen=isFull
			 
			 },
			 
		 }
	 }
</script>

<style lang="scss" scoped>
	.video{
		// display: flex;
		// flex-wrap: wrap;
	.video-list{
		width: calc((100% - 60rpx)/2);
		margin-left: 20rpx;
		height: 200rpx;
		border-radius: 10rpx;
		overflow: hidden;
		position: relative;
		display: inline-block;
		margin-bottom: 30rpx;
		&-img{
			width: 100%;
			height: 100%;
		}
		&-stop{
			width: 80rpx;
			height: 80rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
		}
	}
	
	}
	.show{
	   display:show;
	}
	.hide{
	   display:none;
	}
	.warp{
		position: fixed;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%,-50%);
	}
</style>
